<template>
  <div class="content">
    <!--    采购员列表弹窗-->
    <el-dialog
      v-dialogDrag
      class="dialog-class"
      :title="$t('market.settleType')"
      model
      :visible.sync="openSettlement"
      :close-on-click-modal="false"
      width="60%"
      destroy-on-close
      :before-close="handleClose"
    >
      <div class="public-form">
        <span style="width: 50px">{{ $t('shop.name1') }}</span>
        <el-input v-model="settlementPagination.fname" size="mini" style="width: 200px" />
        <el-button type="primary" size="mini" style="margin-left: 20px" @click="handleSettlement">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-header="tableSettlementHeader"
        :table-data="tableSettlement"
        table-height="46vh"
        @clickRow="settlementSelect"
      />
      <jc-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="settlementPagination.pageNum"
        :limit.sync="settlementPagination.pageSize"
        @pagination="handleSettlement"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryViewItem } from '@/api/marketManage/marketOrder'

export default {
  data() {
    return {
      tableSettlement: [], // 结算方式
      openSettlement: true,
      tableSettlementHeader: [
        { label: this.$t('shop.fnumber'), prop: 'fnumber' },
        { label: this.$t('shop.name1'), prop: 'fname' },
        { label: this.$t('market.businessClassify'), prop: 'dataGroupName' }
      ],
      settlementPagination: {
        fname: '',
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      total: 0,
      prodValue: { fsettleType: '', fsettleTypeId: '' }
    }
  },
  created() {
    this.handleSettlement()
  },
  methods: {
    // 结算方式
    async handleSettlement() {
      const { data: res } = await queryViewItem({ viewName: 'SX_SETTLETYPE' })
      this.total = res.total
      this.tableSettlement = res.list
    },
    // 双击结算方式
    settlementSelect(item) {
      this.prodValue.fsettleType = item.fname
      this.prodValue.fsettleTypeId = item.fid
      this.prodValue.fsettleTypeNum = item.fnumber
      this.$emit('settlement', this.prodValue)
    },
    clientSearch() {
      this.supplierPagination.pageNum = 1
      this.handleSettlement()
    },
    // 关闭前回调
    handleClose() {
      this.$emit('settlement', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .materiel-form {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-bottom: 10px;

    .materiel-code {
      font-weight: bold;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 12px 0 0;
    }

    .input-width {
      width: 16vw;
      margin-right: 10px;
    }
  }
}
</style>
